<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>动画案例-奔跑的北极熊</title>
        <style>
            body {
                background-color: #ccc;
            }

            div {
                position: absolute;
                width: 200px;
                height: 100px;
                background: url(images/bear.png) no-repeat;
                /* 一个元素可以添加多个动画，用逗号分隔 */
                animation: bear 0.8s steps(8) infinite, move 3s forwards;
            }

            @keyframes bear {
                0% {
                    background-position: 0 0;
                }
                100% {
                    background-position: -1600px 0;
                }
            }

            @keyframes move {
                0% {
                    left: 0;
                }
                100% {
                    /* 设置停留在中间部分 */
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        </style>
    </head>

    <body>
        <div></div>
    </body>
</html>
